<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>店铺详情页</title>
			<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<style type="text/css">
		   a{
			  text-decoration: none;
			  color: black;
			}
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			.conter{
				margin-top: 40px;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				float: left;
			}
			.top{
				background: #FFFFFF;
			}
			.swiper-container img{
				width: 100%;
				height: 100% !important;
			}
			.swiper-container .swiper-pagination{
				margin-bottom: -5px;
			}
			.three{
				display: inline-block;
				width: calc(100% - 20px);
				margin-left: 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #fafafa;
				color: #5C5C67;
				font-size: 16px;
			}
			.centert{
				margin-top: 10px;
				background: #FFFFFF;
			}
			.shangjia{
				display: inline-block;
				width: calc(100% - 20px);
				margin-left: 10px;
				height: 26px;
				line-height: 26px;
				border-bottom: 1px solid #fafafa;
				font-size: 12px;
				color: #a0a0a7;
			}
			.shangjia i{
				float: right;
			}
			.shop{
				width: calc(100% - 20px);
				margin-left: 10px;
				height: 60px;
				line-height: 60px;
			}
			.tit{
				display:inline-block;
				color: #5C5C67;
				float: left;
				height: 60px;
				width: calc(100% - 45px);
				line-height: 25px;
				font-size: 12px;
			}
			.dianhua{
				line-height: 45px;
				float: right;
				/* margin-top: -52px; */
				width: 45px;
				height: 45px;
				text-align: center;
				border-left:1px solid #fafafa;
			}
			.shop i{
				display: inline-block;
				width: 40px;
				height: 40px;
				margin-left: 5px;
				border-radius:40px;
				background: url(${BASE_PATH}/static/app/img/dianhua.png) no-repeat 5px 3px;
				background-size:85% ;
			}
			.shopping{
				display: inline-block;
				width: 100%;
				height: 35px;
				line-height: 35px;
				text-align: center;
				font-size: 16px;
				color: #FFFFFF;
				background: #a9dde3;
			}
			.caini ul {
			     margin-top: 5px; 
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="header">
					<span class="back" onclick="javascript:history.go(-1);"></span>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
				</div>
			</header>
			<div class="conter">
				<div class="top">
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					    	<c:if test="${fn:length(adList) > 0}">
								<c:forEach var="ad" items="${adList}" varStatus="s">
									<div class="swiper-slide">
										<img src="${FTP_PATH}${ad.thumb}" alt="" />
									</div>
								</c:forEach>
							</c:if>
							<c:if test="${fn:length(adList) == 0}">
						        <div class="swiper-slide"><img src="${BASE_PATH}/static/app/img/mode.png" class="lunbo-img" style="height:300px;"/></div>
							</c:if>
					    </div>
					    <div class="swiper-pagination"></div>
					</div>
					<span class="three">${store.title }</span>
					<div class="shop">
						<span class="tit" id="storeid" style="display: none">${store.storeid }</span>
						<span class="tit">店铺地址：${store.address }</span>
						<a href="tel:${store.tel }"><span class="dianhua" ><i></i></span></a>
					</div>
					<c:if test="${size > 0}">
						<span class="shopping" onclick="chakan('${store.storeid}','${store.sellerId }');">查看该商家下的其他店铺</span>
					</c:if>
					<c:if test="${size == 0}">
						<span class="shopping" >查看该商家下的其他店铺</span>
					</c:if>
				</div>
				<div class="centert">
					<span class="shangjia">店铺全部宝贝<i>共${store.num }件</i></span>
					<div class="caini am-g app-goods-list " id="goodsList"></div>
				</div>
			</div>
			<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
				<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
			</div>
		</div>
			
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
<%-- 		<a href="${BASE_PATH}/goods/jfdetail/{{item.id}}-{{item.storeid}}?type=3"> --%>
		<script type="text/html" id="dataTpl">
		{{each list as item}}
		<div class="list_box am-u-md-4 am-u-lg-3 app-goods-item">
			<ul>
				<li>
                    {{if item.integCur_c!=0}}
						<a href="${BASE_PATH}/goods/jfdetail/{{item.id}}?type=3&storeid={{item.storeid}}">
					{{/if}}
					{{if item.integral!=0}}
						<a href="${BASE_PATH}/goods/jfdetail/{{item.id}}?type=2&storeid={{item.storeid}}">
					{{/if}}
					{{if item.currency!=0}}
						<a href="${BASE_PATH}/goods/jfdetail/{{item.id}}?type=1&storeid={{item.storeid}}">
					{{/if}}
						<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
						<span class="tital">{{item.name}}</span>
						<span class="bot">
							{{if item.integCur_c!=0}}
									<i class="caini_price">{{if item.integCur_iType==1}}商品积分{{else if item.integCur_iType==2}}健康积分{{else if item.integCur_iType==3}}教育积分{{/if}} {{item.integCur_i}} + ¥{{item.integCur_c}}</i>
							{{else if item.integral!=0}}
								<i class="caini_price">{{if item.integralType==1}}商品积分{{else if item.integralType==2}}健康积分{{else if item.integralType==3}}教育积分{{/if}} {{item.integral}}</i>
							{{else if item.currency!=0}}
								<i class="caini_price"> ¥{{item.currency}}</i>
							{{/if}}
							<span class="men"><i class="men_price"><i class="aline"></i>门市价:¥{{item.marketPrice}}</i><i class="men_jian">已售{{item.num}}件</i></span>
						</span>
					</a>
				</li>
			</ul>
		</div>
		{{/each}}
		</script>
		<script type="text/javascript">
			var mySwiper0 = new Swiper ('.swiper-container', {
			    direction: 'horizontal',
			    loop: true,
			    pagination: '.swiper-pagination',
			    observer:true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents:true,//修改swiper的父元素时，自动初始化swiper
			});
			var width = $(".swiper-container img").width();
			$(".swiper-container img").height(width*3/4);
			var width = $(".caini ul li img").width();
			$(".caini ul li img").height(width);
			$(".caini ul li").height(width);
			var pageNum = 0,totalPage = 1,loading = false;
			$(query);
			function query(){
				var storeid="${store.storeid}";
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#goodsList").append("<div class=\"app-loading\">正在加载</div>");
	               		Kit.ajax.post("${BASE_PATH}/goods/pageStore",{pageNum:pageNum+1,pageSize:10,storeid:storeid},function(result){
							$("#goodsList").append(template("dataTpl",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#goodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#goodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#goodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
							//重置加载标识
							loading = false;
						});
	               	}
				});
			 
			}
			function chakan(storeid,sellerId){
				window.location.href="${BASE_PATH}/goods/storeList?storeid="+storeid+"&sellerId="+sellerId;
			}
		</script>
	</body>
</html>
